{% extends "skeleton.html" %}
{% import "issues/macros.html" as m %}

{% block header %}
  {{m.html_header(resource_version)}}
  <script src="/ckeditor/v{{resource_version}}/ckeditor.js"></script>
{% endblock %}
{% block pagetitle %}Issues{% endblock %}
{% block title %}Issues{% endblock %}

{% block maincontent %}
  <section class="content">
    <nav class="breadcrumbs">
      <ul>
        <li><a href="/">War Worlds</a>
        <li><a href="/issues">Issues</a>
        <li><span># {{issue.summary}}</span>
      </ul>
    </nav>

    <nav class="issue-controls">
      <ul>
        <li><a href="/issues/new" class="button">Report Issue</a>
      </ul>
    </nav>

    <h1>{{issue.summary}}</h1>

    <fieldset class="issue-readonly">
      <legend>Issue # {{issue.key().id()}}</legend>
      <fieldset class="issue-callout">
        <div class="issue-field">
          <label>Type:</label>
          <div class="field-value">{{issue.type}}</div>
        </div>
        <div class="issue-field">
          <label>Priority:</label>
          <div class="field-value">{{['1 - Game Unplayable', '2 - Normal', '3 - Cosmetic'][issue.priority-1]}}</div>
        </div>
        <div class="issue-field">
          <label>State:</label>
          <div class="field-value">
            {{issue.state}}
            {%- if issue.state == 'Closed' %}, {{issue.resolution}}{% endif %}
          </div>
        </div>
      </fieldset>
      <div class="issue-field">
        <label>Summary:</label>
        <div class="field-value">{{issue.summary}}</div>
      </div>
      <div class="issue-field">
        <label>Description:</label>
        <div class="field-value">{{issue.description}}</div>
      </div>
    </fieldset>

    {% for update in updates %}
    <article class="issue-update" data-updateid="{{update.key()}}">
      <img src="{{profiles[update.user.user_id()]|profile_shield}}" class="poster-shield" width="64" height="64" alt="Shield" />
      <header>
        <span class="author"><a rel="author" href="/">{{profiles[update.user.user_id()].display_name}}</a></span>
        <span class="posted">posted <time itemprop="dateCreated" datetime="{{update|post_date_std}}">{{update|post_date_time}}</time></span>
      </header>
      <div class="action">
        {% if update.action == 'Leave' %}
        {%- elif update.action == 'Open' %}→ Opened
        {%- elif update.action == 'CloseFixed' %}→ Fixed
        {%- elif update.action == 'CloseDupe' %}→ Duplicate {% if update.duplicate_of %}of &ldquo;<a href="/issues/{{update.duplicate_of.key().id()}}">{{ update.duplicate_of.summary }}</a>&rdquo;{% endif %}
        {%- elif update.action == 'CloseWorksForMe' %}→ Works for me
        {%- elif update.action == 'CloseReject' %}→ Rejected
        {%- endif %}
      </div>
      {% if update.new_priority %}<div class="action"><strong>Priority</strong> → P{{update.new_priority}}</div>{% endif %}
      {% if update.new_type %}<div class="action"><strong>Type:</strong> → {{update.new_type}}</div>{% endif %}
      <div class="comment">
        {{update.comment}}
      </div>
    </article>
    {% endfor %}

    <a name="update-issue"></a>
    <form method="POST" action="/issues/{{issue.key().id()}}">
      <fieldset class="no-border">
        <header class="update-issue-header">
          Update Issue
        </header>
        <div class="issue-field select update-action">
          <label for="update-action">Action:</label>
          <select name="update-action" id="update-action">
          {%- for action in actions %}
            <option value={{action[0]}}>{{action[1]}}</option>
          {%- endfor %}
          </select>
          <input type="text" pattern="[0-9]+" id="update-duplicate-of" name="update-duplicate-of" placeholder="Issue #"
                 oninvalid="setCustomValidity('Issue # should be numerical.')" onchange="try { setCustomValidity(''); } catch(e) {}" />
        </div>
        <div class="issue-field issue-field-half select">
          <label for="update-type">Type:</label>
          <select name="update-type" id="update-type">
            <option value="B"{% if issue.type == 'Bug' %} selected{% endif %}>Bug</option>
            <option value="FR"{% if issue.type == 'FeatureRequest' %} selected{% endif %}>Feature Request</option>
            <option value="P"{% if issue.type == 'Process' %} selected{% endif %}>Process</option>
          </select>
        </div>
        <div class="issue-field issue-field-half select">
          <label for="update-priority">Priority:</label>
          <select name="update-priority" id="update-priority">
            <option value="1"{% if issue.priority == 1 %} selected{% endif %}>1 - Game Unplayable</option>
            <option value="2"{% if not issue.priority or issue.priority == 2 %} selected{% endif %}>2 - Normal</option>
            <option value="3"{% if issue.priority == 3 %} selected{% endif %}>3 - Cosmetic</option>
          </select>
        </div>
        <div class="issue-field issue-field-wysiwyg">
          <label for="update-comment">Comment:</label>
          <div class="hack"><textarea name="update-comment" id="update-comment"></textarea></div>
        </div>
        <div class="issue-field checkbox">
          <div class="hack"><input type="checkbox" name="issue-subscribe" id="issue-subscribe" checked></div>
          <label for="post-subscribe">Also subscribe to this issue.</label>
        </div>
        <div class="issue-field issue-field-submit">
          <div class="input-button"><input type="submit" value="Post"></div>
        </div>
      </fieldset>
    </form>
    <script>
      $(function() {
        var editor = CKEDITOR.replace("update-comment");
        var $container = $("fieldset div.issue-field-wysiwyg div.hack");

        CKEDITOR.on("instanceReady", function() {
          editor.resize($container.width(), $container.height());
        });
        $(window).resize(function() {
          editor.resize($container.width(), $container.height());
        });

        var changed = false;
        var saving = false;
        editor.on("change", function() {
          changed = true;
        });
        $("form").on("submit", function() {
          saving = true;
        });
        $(window).on("beforeunload", function() {
          if (changed && !saving) {
            return "You have unsaved changes.";
          }
        });

        function showHideDuplicateOf() {
          if ($("#update-action").val() == "CloseDupe") {
            $("#update-duplicate-of").show();
          } else {
            $("#update-duplicate-of").hide();
          }
        }
        $("#update-action").change(function() {
          showHideDuplicateOf();
        });
        showHideDuplicateOf();
      });
    </script>
  </section>
{% endblock %}
